<template>
    <div style="width:100%;height:400px;padding:20px;text-align:center">
        <div style="margin:auto;width:1024px;height:400px;">
        <component :is="chartType" :data="chartData"/>
        <a-button @click="dynamicCharts('ve-pie')">
            {{i18n('button.pieChart','饼图')}}
        </a-button>
        <a-button @click="dynamicCharts('ve-bar')">
            {{i18n('button.barChart','条图')}}
        </a-button>
        <a-button @click="dynamicCharts('ve-line')">
            {{i18n('button.line','线图')}}
        </a-button>
        <a-button @click="dynamicCharts('ve-histogram')">
            {{i18n('button.histogram','柱状图')}}
        </a-button>
        <a-button @click="dynamicCharts('ve-ring')">
            {{i18n('button.ring','环图')}}
        </a-button>
        <a-button @click="dynamicCharts('ve-waterfall')">
            {{i18n('button.waterfall','瀑布图')}}
        </a-button>
        <a-button @click="dynamicCharts('ve-funnel')">
            {{i18n('button.funnel','漏斗图')}}
        </a-button>
        <a-button @click="dynamicCharts('ve-radar')">
            {{i18n('button.radarMap','雷达图')}}
        </a-button>
        <a-button @click="dynamicCharts('ve-gauge')">
            {{i18n('button.panel','仪表盘')}}
        </a-button>
        <a-button @click="dynamicCharts('ve-heatmap')">
            {{i18n('button.thermal','热力图')}}
        </a-button>
        <a-button @click="dynamicCharts('ve-scatter')">
            {{i18n('button.scatter','散点图')}}
        </a-button>
        <a-button @click="dynamicCharts('ve-candle')">
            {{i18n('button.chart','K线图')}}
        </a-button>
        <a-button @click="dynamicCharts('ve-liquidfill')">
            {{i18n('button.waterDiagram','水球图')}}
        </a-button>
        <a-button @click="dynamicCharts('ve-wordcloud')">
            {{i18n('button.panelMap','词云图')}}
        </a-button>
        </div>
    </div>
</template>
<script>

export default {
    name:'ChartMain',
    data () {
      return {
        chartData: {
          columns: [
              this.i18n('title.date','日期'),
              this.i18n('title.access','访问用户'),
              this.i18n('title.panelMap','下单用户'),
              this.i18n('title.anelMap','下单率')],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        },
        chartType:'ve-pie'
      }
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "Chart", key);
        },
        dynamicCharts(type){
            this.chartType=type;
        }
    }
}
</script>